<template>
	<view id="read_page">
		<view class="read_list" v-for="(item, index) in bookList" :key="index" @click="gotoBookList(item.Id)">
			<view class="img">
				<image :src="item.Img"></image>
				<!-- <image src="../../static/logo.png"></image> -->
			</view>
			
			<view class="content">
				<view class="title">
					<text class="name">{{item.CName}}</text>
					<text class="author">{{item.Author}}</text>
				</view>
				<view class="desc">
					{{item.Desc}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const readBaseUrl = "https://sou.jiaston.com/"
	export default {
		data (){
			return { 
				bookList: [],
			}
		},
		mounted() {
			
		},
		
		onLoad(option) {
			console.log(123)
			this.getBookList();
		},
		methods: {
			/**
			 * 获取书籍列表
			 */
			getBookList (){
				let that = this;
				uni.request({
					url: readBaseUrl+"search.aspx?key=道君&page=1&siteid=app2", 
					method: 'get',
					success: res=>{
						console.log(res)
						that.bookList = res.data.data;
					},
					error: err=>{
						
					}
				})
			},
			
			gotoBookList (id){
				uni.navigateTo({
					url:"/pages/read/bookList?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	#read_page{
		.read_list{
			display: flex;
			flex-direction: row;
			max-height: 150rpx;
			border-bottom: 1rpx solid #dde;
			padding:16rpx;
			
			
			.img{
				
				image{
					height: 100%;
					width: 100rpx;
				}
			}
		}
		
		.content{
			margin-left:20rpx;
			font-size: 22rpx;
			.title{
				display: flex;
				justify-content: space-between;
				height:40rpx;
				border-bottom: 1rpx dotted #dde;
				
				.name{
					font-weight: bold;
					color: #6f78a7;
				}
				.author{
					color: #999;
				}
			}
			
			.desc{
				font-size: 22rpx;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:3;
				height: 95rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				color:#666;
			}
		}
	}
</style>
